<template>
  <!-- 投入回本管理 -->
  <div class="wrap">
    <div class="headcss">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="sbcolor">
        <el-tab-pane label="设备投入回本" name="first">
          <!-- 设备投入回本 start -->
          <div class="labelBox">
            <el-form :inline="true" class="demo-form-inline">
              <div>
                <el-form-item label="设备方类型">
                  <el-select
                    v-model="equipmenttype"
                    placeholder="请选择"
                    @change="equipmentClick"
                    clearable
                  >
                    <el-option
                      v-for="item in equipmentList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="设备方名">
                  <el-input
                    v-model="equipmentname"
                    placeholder="请输入设备方名"
                    maxlength="12"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit"
                    ><i class="el-icon-upload el-icon--right"></i
                    >筛选</el-button
                  >
                  <el-button @click="reset">重置</el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div class="labelBox">
            <el-row class="line36">
              <el-col>
                条件满足结果合计：设备数
                <span class="color-red font-bold">{{
                  condition.machineNum
                }}</span
                >台， 设备投入金额：
                <span class="color-red font-bold">{{
                  condition.devicesCost
                }}</span
                >元， 已回本：
                <span class="color-red font-bold">{{
                  condition.device_Payoff
                }}</span
                >元， 回本率：
                <span class="color-red font-bold">{{
                  condition.devicePayoffRate+ "%"
                }}</span>
              </el-col>
            </el-row>
            <el-table
              border
              :data="tableData"
              style="width: 100%"
              ref="multipleTable"
              tooltip-effect="dark"
              @selection-change="handleSelectionChange"
              :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column type="index" label="序号" width="55" />
              <el-table-column prop="store_Name" label="投入设备方">
              </el-table-column>
              <el-table-column
                prop="merchant_Type"
                label="类型"
                :formatter="showmerchant"
              />
              <el-table-column prop="machineNum" label="设备数" />
              <el-table-column prop="devicesCost" label="设备投入金额" />
              <el-table-column prop="device_Payoff" label="已回本" />
              <el-table-column prop="devicePayoffRate" label="回本率">
                <template slot-scope="scope">
                  {{ scope.row.devicePayoffRate + "%" }}
                </template>
              </el-table-column>
              <el-table-column prop="store_Id" label="回本明细">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    @click="returndetails(scope.row.store_Id)"
                    size="mini"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column prop="score" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    @click="dialogTableVisibleClick(scope.row.store_Id)"
                    size="mini"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="totalListClick > 0"
              :total="totalListClick"
              :page.sync="pageIndex"
              :limit.sync="pageSize"
              @pagination="StoreGetPageList"
            />
          </div>

          <!-- 设备投入回本 end -->
        </el-tab-pane>
        <el-tab-pane label="基建投入回本" name="second">
          <!-- 基建投入回本 start -->
          <div class="labelBox">
            <el-form :inline="true" class="demo-form-inline">
              <div>
                <el-form-item label="基建方名">
                  <el-input
                    v-model="basicsname"
                    placeholder="请输入基建方名"
                    maxlength="12"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmitJj"
                    ><i class="el-icon-upload el-icon--right"></i
                    >筛选</el-button
                  >
                  <el-button @click="resetJj">重置</el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div class="labelBox">
            <el-row class="line36">
              <el-col>
                条件满足结果合计：基建数
                <span class="color-red font-bold">{{
                  conditionjj.stationNum
                }}</span
                >台， 基建投入金额：
                <span class="color-red font-bold">{{
                  conditionjj.infrastructure_Cost
                }}</span
                >元， 已回本：
                <span class="color-red font-bold">{{
                  conditionjj.infrastructure_Payoff
                }}</span
                >元， 回本率：
                <span class="color-red font-bold">{{
                  conditionjj.payoffRate+ "%"
                }}</span>
              </el-col>
            </el-row>
            <el-table
              border
              :data="tableDataList"
              style="width: 100%"
              ref="multipleTable"
              tooltip-effect="dark"
              @selection-change="handleSelectionChange"
              :header-cell-style="{ textAlign: 'center' }"
              :cell-style="{ textAlign: 'center' }"
            >
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column type="index" label="序号" width="55">
              </el-table-column>
              <el-table-column prop="store_Name" label="投入基建方">
              </el-table-column>
              <el-table-column prop="stationNum" label="基建数" />
              <el-table-column
                prop="infrastructure_Cost"
                label="基建投入金额"
              />
              <el-table-column prop="infrastructure_Payoff" label="已回本" />
              <el-table-column prop="payoffRate" label="回本率">
                <template slot-scope="scope">
                  {{ scope.row.payoffRate + "%" }}
                </template>
              </el-table-column>
              <el-table-column prop="name" label="回本明细">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    @click="returndetails(scope.row.store_Id)"
                    size="mini"
                    >查看详情</el-button
                  >
                </template>
              </el-table-column>
              <el-table-column prop="score" label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    @click="basicsdialogTableVisibleClick(scope.row.store_Id)"
                    size="mini"
                    >查看</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="totaljjClick > 0"
              :total="totaljjClick"
              :page.sync="pageIndex"
              :limit.sync="pageSize"
              @pagination="GetStationInfrastructurePayoff"
            />
          </div>
          <!-- 基建投入回本 end -->
        </el-tab-pane>
      </el-tabs>
      <!-- 弹框 -->
      <!-- 设备投入回本弹框 -->
      <el-dialog
        width="70%"
        title="投入设备详情"
        :visible.sync="dialogTableVisible"
      >
        <div class="titlehei">设备方：{{ devicedetails.store_Name }}</div>
        <div class="titlehei">负责人：{{ devicedetails.principalName }}</div>
        <div class="titlehei">账号ID: {{ devicedetails.principalMobile }}</div>
        <div class="flex width-50 mt-10">
          <div class="flbox width-25">
            <div class="font-18 font-bold">{{ devicedetails.machineNum }}</div>
            <div class="font-12 mt-10">总投入设备数(台)</div>
          </div>
          <div class="flbox width-25">
            <div class="font-18 font-bold">{{ devicedetails.devicesCost }}</div>
            <div class="font-12 mt-10">总投入金额(元)</div>
          </div>
          <div class="flbox width-25">
            <div class="font-18 font-bold">
              {{ devicedetails.device_Payoff }}
            </div>
            <div class="font-12 mt-10">已回本金额(元)</div>
          </div>
          <div class="flbox width-25">
            <div class="font-18 font-bold">
              {{ devicedetails.devicePayoffRate+ "%" }}
            </div>
            <div class="font-12 mt-10">回本率</div>
          </div>
        </div>
        <el-tabs
          v-model="bulletfactive"
          @tab-click="bfhandleClick"
          class="mt-10"
        >
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="待回本" name="second"></el-tab-pane>
          <el-tab-pane label="回本中" name="third"></el-tab-pane>
          <el-tab-pane label="完成" name="fourth"></el-tab-pane>
        </el-tabs>

        <el-row v-if="devicedetailsList.length > 0">
          <el-col
            class="framebox"
            :span="7"
            v-for="(item, index) in devicedetailsList"
            :key="index"
            style="height: 300px; overflow-y: scroll"
          >
            <div class="flex flex-jc-sb">
              <div class="flex flex-ai-c">
                <div class="framename font-bold">{{ item.station_Name }}</div>
                <div class="ml-10 font-12" v-if="item.devicePayoffStatus !== 10">
                  回本顺序{{ item.currentPayoffSequence }}，{{
                    item.merchant_type
                  }}回本中
                </div>
              </div>
              <div class="color-EB5B01">{{ item.devname }}</div>
            </div>
            <el-divider></el-divider>

            <div class="flex mt-20 font-12">
              <div class="flbox width-60">
                <div class="font-14 font-bold color-3DB707">
                  {{ item.device_Payoff }}
                </div>
                <div class="mt-10">已回本(元)</div>
              </div>
              <div class="flbox width-60">
                <div class="font-14 font-bold">{{ item.devicePayoffRate+ "%" }}</div>
                <div class="mt-10">回本率</div>
              </div>
              <div class="flbox width-60">
                <div class="font-14 font-bold">{{ item.devicesCost }}</div>
                <div class="mt-10">投入金额(元)</div>
              </div>
            </div>
            <div class="mt-20">
              洗车机<span class="numcolor ml-10">{{ item.machineNum }}</span>
            </div>

            <div
              class="mt-20 font-12"
              v-for="(
                item1, index2
              ) in item.selfServiceCarWashDevicePayoffMachinesList"
              :key="index2"
            >
              <div class="flex">
                <div class="flbox width-60">
                  <div class="">{{ item1.machine_Code }}</div>
                  <div class="mt-10">设备编号</div>
                </div>
                <div class="flbox width-60">
                  <div class="" v-if="item1.type_Name === ''">
                    {{ item1.type_Name !== "" ? item1.type_Name : "-" }}
                  </div>
                  <div class="" v-else-if="item1.type_Name === null">
                    {{ item1.type_Name !== null ? item1.type_Name : "-" }}
                  </div>
                  <div v-else>
                    {{ item1.type_Name }}
                  </div>
                  <div class="mt-10">设备型号</div>
                </div>
                <div class="flbox width-60">
                  <div class="">{{ item1.device_Cost }}</div>
                  <div class="mt-10">设备价格(元)</div>
                </div>
              </div>
              <el-divider></el-divider>
            </div>
          </el-col>
        </el-row>
        <div v-else>暂无数据</div>

        <pagination
          v-show="devicedetailsList.length > 0"
          :total="devicedetailsList.length"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="equipmentconditionList"
        />
      </el-dialog>
      <!-- 基建投入回本弹框 -->
      <el-dialog
        width="70%"
        title="投入基建详情"
        :visible.sync="basicsdialogTableVisible"
      >
        <div class="titlehei">设备方：{{ jjdevicedetails.store_Name }}</div>
        <div class="titlehei">负责人：{{ jjdevicedetails.principalName }}</div>
        <div class="titlehei">
          账号ID: {{ jjdevicedetails.principalMobile }}
        </div>
        <div class="flex width-50 mt-10">
          <div class="flbox width-25">
            <div class="font-18 font-bold">
              {{ jjdevicedetails.stationNum }}
            </div>
            <div class="font-12 mt-10">总投入站点数(个)</div>
          </div>
          <div class="flbox width-25">
            <div class="font-18 font-bold">
              {{ jjdevicedetails.infrastructure_Cost }}
            </div>
            <div class="font-12 mt-10">总投入金额(元)</div>
          </div>
          <div class="flbox width-25">
            <div class="font-18 font-bold">
              {{ jjdevicedetails.infrastructure_Payoff }}
            </div>
            <div class="font-12 mt-10">已回本金额(元)</div>
          </div>
          <div class="flbox width-25">
            <div class="font-18 font-bold">
              {{ jjdevicedetails.payoffRate+ "%" }}
            </div>
            <div class="font-12 mt-10">回本率</div>
          </div>
        </div>
        <div class="biaoqian">{{ notenteredCount }}</div>
        <!--未录入总数 -->
        <el-tabs
          v-model="Jjbulletfactive"
          @tab-click="JjbfhandleClick"
          class="mt-10"
        >
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="待回本" name="second"></el-tab-pane>
          <el-tab-pane label="回本中" name="third"></el-tab-pane>
          <el-tab-pane label="完成" name="fourth"></el-tab-pane>
          <el-tab-pane label="未录入" name="fifth"></el-tab-pane>
          <el-tab-pane label="待审核" name="sixth"></el-tab-pane>
        </el-tabs>
        <el-row v-if="jjdevicedetailsList.length > 0">
          <el-col
            :span="7"
            class="framebox"
            v-for="(item, index) in jjdevicedetailsList"
            :key="index"
            style="height: 360px; overflow-y: scroll"
          >
            <div class="flex flex-jc-sb">
              <div class="flex">
                <div class="framename font-bold">{{ item.station_Name }}</div>
                <div class="ml-10" v-if="item.payoffStatus !== 55">
                  回本顺序{{ item.currentPayoffSequence }}，{{
                    item.merchant_type
                  }}回本中
                </div>
              </div>
              <div class="color-EB5B01">{{ item.devname }}</div>
            </div>
            <el-divider></el-divider>

            <div class="flex mt-20 font-12">
              <div class="flbox width-60">
                <div
                  class="font-14 font-bold color-3DB707"
                  v-if="item.payoffStatus !== 100"
                >
                  {{ item.infrastructure_Payoff }}
                </div>
                <div v-else>—</div>
                <div class="mt-10">已回本(元)</div>
              </div>
              <div class="flbox width-60">
                <div class="font-14 font-bold" v-if="item.payoffStatus !== 100">
                  {{ item.payoffRate+ "%" }}
                </div>
                <div v-else>—</div>
                <div class="mt-10">回本率</div>
              </div>
              <div class="flbox width-60">
                <div class="font-14 font-bold" v-if="item.payoffStatus !== 100">
                  {{ item.infrastructure_Cost }}
                </div>
                <div v-else>—</div>
                <div class="mt-10">投入金额(元)</div>
              </div>
            </div>
            <el-divider></el-divider>
            <div v-if="item.payoffStatus !== 100">
              <div class="mt-20 font-12">
                基建成本：{{ item.infrastructure_Cost }}
              </div>
              <div class="mt-10 font-12">成本确认证明</div>
              <div class="flex mt-20 font-12">
                <!-- 基建图片 -->
                <div>
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.property_Pic_URL"
                    :preview-src-list="[item.property_Pic_URL]"
                  >
                  </el-image>
                </div>
                <div>
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="item.platform_Pic_URL"
                    :preview-src-list="[item.platform_Pic_URL]"
                  >
                  </el-image>
                </div>
              </div>
              <div class="mt-20 font-12">
                提交时间：{{ item.addtime | filterTime }} {{ item.accountName }}
              </div>
              <div class="mt-10 font-12" v-show="item.payoffStatus !== 5">
                审核时间：{{ item.review_Time | filterTime
                }} {{ item.reviewer_Name }}
              </div>
              <div
                class="mt-20 font-12 flex flex-jc-sb"
                v-if="item.payoffStatus === 5"
              >
                <div class="flex flex-ai-c">
                  <div>审核成本：</div>
                  <div class="withnr">
                    <el-input
                      v-model="auditcost"
                      type="number"
                      placeholder="请输入（元）"
                      maxlength="12"
                    ></el-input>
                  </div>
                </div>
                <div>
                  <el-button type="primary" @click="audiClick(item.inf_Id)"
                    >审核确认</el-button
                  >
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <div v-else>暂无数据</div>
        <pagination
          v-show="jjdevicedetailsList.length > 0"
          :total="jjdevicedetailsList.length"
          :page.sync="pageIndex"
          :limit.sync="pageSize"
          @pagination="GetSelfWashInfrastructurePayoffByStoreId"
        />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import router from "@/router";
export default {
  name: "costmanagement",
  data() {
    return {
      tableData: [],
      tableDataList: [],
      pageIndex: 1,
      pageSize: 10,
      storetype: "0",
      totalListClick: 0,
      totaljjClick: 0,
      totalsbClick: 0,
      total: 0,
      params: {
        status: null,
        phone: "",
        name: "",
      },
      equipmentList: [
        {
          id: 0,
          name: "自助洗车资源方",
        },
        {
          id: 1,
          name: "自助洗车基建方",
        },
        {
          id: 2,
          name: "自助洗车场地方",
        },
        {
          id: 3,
          name: "自助洗车总设备方",
        },
        {
          id: 4,
          name: "自助洗车子设备方",
        },
        {
          id: 10,
          name: "自助洗车普通加盟商",
        },
      ],
      equipmentname: "", //查询——设备方名称
      equipmenttype: null, //查询——设备方类型
      activeName: "first",
      dialogTableVisible: false,
      basicsdialogTableVisible: false,

      basicsname: "", //查询——基建名称

      // 弹框滑块
      bulletfactive: "first",
      //基建
      Jjbulletfactive: "first",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      ],
      auditcost: "", //审核成本输入
      condition: [], //条件满足
      devicedetails: [], //设备详情
      devicedetailsList: [], //设备详情-列表
      storsid: "", //店铺id
      querystate: 0, //查看状态

      jjstorsid: "", //jj店铺id
      jjdevicedetails: [], //jj详情
      jjdevicedetailsList: [], //jj详情-列表
      jjquerystate: 0, //jj查看状态

      conditionjj: [], //基建条件满足
      notenteredCount: 0, //未录入总数
    };
  },
  mounted() {
    this.StoreGetPageList();
    if (this.$route.query.activeName !== undefined) {
      this.activeName = this.$route.query.activeName;
    }
  },
  methods: {
    // 设备投入回本列表
    StoreGetPageList() {
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        merchant_Type: this.equipmenttype,
        store_Name: this.equipmentname,
      };
      this.$api.investment.GetSelfServiceCarList(data).then((res) => {
        console.log(res);
        this.tableData = res.data.selfServiceCarWashMachineDeviceCostList;
        this.condition = res.data.selfServiceCarWashMachineDeviceTotalCost;
        this.totalListClick = res.data.total;
      });
    },
    showmerchant(row) {
      switch (row.merchant_Type) {
        case 1:
          return "自助洗车基建方";
        case 2:
          return "自助洗车场地方";
        case 3:
          return "自助洗车总设备方";
        case 4:
          return "自助洗车子设备方";
        case 10:
          return " 自助洗车普通加盟商";
        default:
          return "自助洗车资源方";
      }
    },
    // 设备详情1
    equipmentcondition() {
      let data = {
        store_Id: this.storsid,
      };
      this.$api.investment.GetSelfServiceCarStoreId(data).then((res) => {
        this.devicedetails = res.data;
      });
    },
    // 设备详情2——列表
    equipmentconditionList() {
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        store_Id: this.storsid,
        devicePayoffStatus: this.querystate, //查询状态，0：全部,1：待回本,5：回本中，10：完成，
      };
      this.$api.investment.GetSelWashStationStoreId(data).then((res) => {
        console.log("设备详情——列表");
        this.devicedetailsList = res.data.list;
        this.devicedetailsList.forEach((item, index) => {
          if (item.devicePayoffStatus === 5) {
            item.devname = "回本中";
          }
          if (item.devicePayoffStatus === 1) {
            item.devname = "待回本";
          }
          if (item.devicePayoffStatus === 10) {
            item.devname = "完成";
          }
          
          if (item.currentPayoffMerchantType === 1) {
            item.merchant_type = "基建方";
          }
          if (item.currentPayoffMerchantType === 2) {
            item.merchant_type = "场地方";
          }
          if (item.currentPayoffMerchantType === 3) {
            item.merchant_type = "总设备方";
          }
          if (item.currentPayoffMerchantType === 4) {
            item.merchant_type = "子设备方";
          }
          if (item.currentPayoffMerchantType === 10) {
            item.merchant_type = "普通加盟商";
          }
        });
        // this.resourcesideClick(comnum);
        this.totalsbClick = res.data.total;
      });
    },
    // 基建投入回本列表
    GetStationInfrastructurePayoff() {
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        store_Name: this.basicsname,
      };
      this.$api.investment.GetStationInfrastructurePayoff(data).then((res) => {
        console.log(res);
        this.tableDataList = res.data.stationInfrastructurePayoffList;
        this.conditionjj = res.data.stationInfrastructureTotalPayoffResponses;
        this.totaljjClick = res.data.total;
      });
    },
    // 基建详情1
    GetSelfPayoffByStoreId() {
      let data = {
        store_Id: this.jjstorsid,
      };
      this.$api.investment.GetSelfPayoffByStoreId(data).then((res) => {
        this.jjdevicedetails = res.data;
      });
    },
    // 基建详情2——列表
    GetSelfWashInfrastructurePayoffByStoreId() {
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        store_Id: this.jjstorsid,
        infrastructureStatus: this.jjquerystate, //查询状态，0：全部,5：审核中，10：审核通过，49：待回本,50：回本中，55：完成,100：未录入
      };
      this.$api.investment
        .GetSelfServiceCarWashInfrastructurePayoffByStoreId(data)
        .then((res) => {
          // console.log("基建详情——列表", res);
          this.jjdevicedetailsList = res.data.list;
          this.jjdevicedetailsList.forEach((item, index) => {
            if (item.payoffStatus === 5) {
              item.devname = "审核中";
            }
            if (item.payoffStatus === 49) {
              item.devname = "待回本";
            }
            if (item.payoffStatus === 10) {
              item.devname = "审核通过";
            }
            if (item.payoffStatus === 50) {
              item.devname = "回本中";
            }
            if (item.payoffStatus === 55) {
              item.devname = "完成";
            }
            if (item.payoffStatus === 100) {
              item.devname = "未录入";
            }
            if (item.currentPayoffMerchantType === 1) {
              item.merchant_type = "基建方";
            }
            if (item.currentPayoffMerchantType === 2) {
              item.merchant_type = "场地方";
            }
            if (item.currentPayoffMerchantType === 3) {
              item.merchant_type = "总设备方";
            }
            if (item.currentPayoffMerchantType === 4) {
              item.merchant_type = "子设备方";
            }
            if (item.currentPayoffMerchantType === 10) {
              item.merchant_type = "普通加盟商";
            }
          });
          this.total = res.data.total;
          this.GetSelfWashInfrastructurePayoffByStoreIdone();
        });
    },
    // 基建详情2——列表-100：未录入
    GetSelfWashInfrastructurePayoffByStoreIdone() {
      let data = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        store_Id: this.jjstorsid,
        infrastructureStatus: 100, //查询状态，0：全部,5：审核中，10：审核通过，49：待回本,50：回本中，55：完成,100：未录入
      };
      this.$api.investment
        .GetSelfServiceCarWashInfrastructurePayoffByStoreId(data)
        .then((res) => {
          this.notenteredCount = res.data.total;
        });
    },
    // 列表滑块切换
    handleClick(tab, event) {
      console.log(tab.index, event);
      if (Number(tab.index) === 1) {
        this.GetStationInfrastructurePayoff();
      }
    },
    // 投入设备——弹框滑块切换
    bfhandleClick(tab, event) {
      switch (Number(tab.index)) {
        case 1:
          this.querystate = 1;
          this.equipmentconditionList();
          return "";
        case 2:
          this.querystate = 5;
          this.equipmentconditionList();
          return "";
        case 3:
          this.querystate = 10;
          this.equipmentconditionList();
          return "";
        default:
          this.querystate = 0;
          this.equipmentconditionList();
          return "";
      }
    },
    // 基建——弹框滑块切换
    JjbfhandleClick(tab, event) {
      switch (Number(tab.index)) {
        case 1:
          this.jjquerystate = 49;
          this.GetSelfWashInfrastructurePayoffByStoreId();
          return "";
        case 2:
          this.jjquerystate = 50;
          this.GetSelfWashInfrastructurePayoffByStoreId();
          return "";
        case 3:
          this.jjquerystate = 55;
          this.GetSelfWashInfrastructurePayoffByStoreId();
          return "";
        case 4:
          this.jjquerystate = 100;
          this.GetSelfWashInfrastructurePayoffByStoreId();
          return "";
        case 5:
          this.jjquerystate = 5;
          this.GetSelfWashInfrastructurePayoffByStoreId();
          return "";
        default:
          this.jjquerystate = 0;
          this.GetSelfWashInfrastructurePayoffByStoreId();
          return "";
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    returnType(id, type) {
      let name = "";
      this[type].forEach((it) => {
        if (it.id == id) {
          name = it.name;
        }
      });
      return name;
    },
    //设备分页——列表下一页
    handleSizeChangeListClick(e) {
      this.pageSize = e;
    },
    handleCurrentChangeListClick(e) {
      this.pageIndex = e;
    },
    //基建分页——列表
    handleSizeChangejjClick(e) {
      this.pageSize = e;
    },
    handleCurrentChangejjClick(e) {
      this.pageSize = e;
    },
    //设备详情分页——列表
    handleSizeChangesbClick(e) {
      this.pageSize = e;
    },
    handleCurrentChangesbClick(e) {
      this.pageSize = e;
    },
    //基建详情分页——列表
    handleSizeChange(e) {
      this.pageSize = e;
    },
    handleCurrentChange(e) {
      this.pageIndex = e;
    },
    selectStoreType(e) {
      // console.log(e)
      this.storetype = e;
      this.StoreGetPageList();
    },
    //选择——查询——设备方
    equipmentClick(type) {
      this.equipmenttype = type;
    },
    //sb查询
    onSubmit() {
      this.StoreGetPageList();
    },
    //jj查询
    onSubmitJj() {
      this.GetStationInfrastructurePayoff();
    },
    //回本明细跳转订单列表
    returndetails(type) {
      this.$router.push({ name: "Order", params: { type: type } });
    },
    //设备重置
    reset() {
      this.equipmenttype = null;
      this.equipmentname = "";
      this.StoreGetPageList();
    },
    //基建重置
    resetJj() {
      this.basicsname = "";
      this.GetStationInfrastructurePayoff();
    },
    // 投入设备详情——操作——查看
    dialogTableVisibleClick(type) {
      this.dialogTableVisible = true;
      this.storsid = type;
      // 弹框滑块
      this.bulletfactive = "first";
      this.querystate = 0; //查询状态，0：全部,1：待回本,5：回本中，10：完成，
      //基建
      this.equipmentcondition(type);
      this.equipmentconditionList();
    },
    //基建-操作-擦看
    basicsdialogTableVisibleClick(type) {
      this.basicsdialogTableVisible = true;
      this.jjstorsid = type;
      this.Jjbulletfactive = "first";
      this.jjquerystate = 0;
      this.GetSelfPayoffByStoreId();
      this.GetSelfWashInfrastructurePayoffByStoreId();
    },
    //审核成本
    audiClick(typeid) {
      let loginname = JSON.parse(localStorage.getItem("USER_INFO"));
      let data = {
        inf_Id: typeid,
        infrastructure_Cost: Number(this.auditcost),
        reviewer_Id: loginname.id,
        reviewer_Name: loginname.nickname,
      };
      this.$api.investment
        .ApproveSelfServiceCarWashInfrastructure(data)
        .then((res) => {
          console.log("res", res);

          this.jjquerystate = 0;
          this.GetSelfWashInfrastructurePayoffByStoreId();
        });
    },
  },
};
</script>
<style scoped>
.wrap {
  width: 100%;
  padding: 0px 10px 10px 10px;
  background: #f5f5f5;
}
.sbcolor {
  background: white;
  padding: 10px;
}
.block {
  text-align: right;
}
/* 弹框css */
.titlehei {
  height: 24px;
}
.flbox {
  text-align: center;
}
.framebox {
  background: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.14);
  border-radius: 5px;
  padding: 10px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.framename {
  color: black;
}
.el-divider--horizontal {
  margin: 10px 0 !important;
}
.numcolor {
  color: rgb(0, 140, 255);
}
.withnr {
  width: 140px;
}
.biaoqian {
  position: absolute;
  margin-left: 340px;
  margin-top: 10px;
  background: red;
  color: white;
  border-radius: 50%;
  text-align: center;
  padding: 0px 4px;
}
</style>
